<template>
  <div class="blacc">
    <div :class="(model === '0' ? 'nameZoneHover' : 'nameZone')">
      <img :src="pic" alt="" class="imgStyle">
    </div>
    <div class="nameZoneStatus" :class="[(dataStore.runStatus === 0 ? 'stayBg' : (dataStore.runStatus === 1 ? 'runBg': 'errorBg'))]">
      <!--背景色 表示状态-->
      {{data.name}}
    </div>
    <Row>
      <p>控制权限：{{dataStore.ctrlType === 0 ? '本地手动': '远程自动'}}</p>
    </Row>
    <!--<Row>
      <p>运行时间：{{dataStore.runtime}} &nbsp;&nbsp;H</p>
    </Row>-->
    <Row class="dxaa">
      <p>运行次数：
        <InputNumber v-model="dataStore.launchTime" size="small" style="width: 35%;" @on-change="saveCc"
                     :readonly="model === '1'"></InputNumber>
      </p>
    </Row>
    <Row>
      <p>输出频率：{{dataStore.freq}} &nbsp;&nbsp; Hz</p>
    </Row>
    <Row>
      <p>给定频率：{{dataStore.givenHz}} &nbsp;&nbsp; Hz</p>
    </Row>
  </div>
</template>

<script>
  export default {
    name: 'CoolBengCard',
    props: {
      data: {
        type: Object,
        default () {
          return {}
        }
      },
      model: {
        type: String,
        default () {
          return '0'
        }
      }
    },
    mounted () {
      this.loadStatusRealTimeData()
      this.loadLaunchTimes()
      this.timer.push(setInterval(() => {
        this.loadStatusRealTimeData()
      }, 5000 + Math.floor(Math.random() * 2000)))
    },
    data () {
      return {
        dataStore: {
          runStatus: 0, // 0 待机 1 运行 2故障 3 通讯异常
          launchTime: Math.ceil(Math.random() * 10 + 1),
          runtime: '',
          freq: '',
          ctrlType: ''
        },
        timer: [],
        pic: null
      }
    },
    methods: {
      loadStatusRealTimeData () {
        window.myapi.do_post('iot/dev/sysReal', {uuid: this.data.uuid}).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.handleStatusDatas(resp.data.data)
          }
        }).finally(() => {
        })
      },
      saveCc () {
        let params = {devId: this.data.devId, times: this.dataStore.launchTime}
        window.myapi.do_post('process/saveLau', params).then(resp => {
        }).finally(() => {
        })
      },
      loadLaunchTimes () {
        let params = {devId: this.data.devId, name: 'launchRecord'}
        window.myapi.do_post('iot/dev/def', params).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            let result = resp.data.data
              this.dataStore.launchTime = parseInt(result[0].value)
          }
        }).catch(error => {
        }).finally(() => {
        })
      },
      handleStatusDatas (you) {
        // 处理主机状态
        let runItem = you.find(item => item.keyName === '水泵运行')
        if (runItem) {
          if (runItem.value === 'N/A') {
            this.dataStore.runStatus = 3
          } else {
            this.dataStore.runStatus = runItem.value
          }
        }
        // 演示-- 运行状态 start
        this.dataStore.runStatus = 1
        if (this.data.name === '1#冷却泵') {
        this.dataStore.runStatus = 0
        }
        // 演示-- 运行状态 end
        this.pic = this.dataStore.runStatus === 0 ? require('@/assets/icon/CoolingPumpGray.png') : (this.dataStore.runStatus === 1 ? require('@/assets/icon/CoolingPump.png') : require('@/assets/icon/CoolingPumpRed.png'))
        let hzItem = you.find(item => item.keyName === '输出频率')
        if (hzItem) {
          this.dataStore.freq = hzItem.value
        }
        let givenHzItem = you.find(item => item.keyName === '给定频率')
        if (givenHzItem) {
          this.dataStore.givenHz = givenHzItem.value
        }
        let runtimeItem = you.find(item => item.keyName === '运行时间')
        if (runtimeItem) {
          this.dataStore.runtime = runtimeItem.value
        } else {
          this.dataStore.runtime = 'N/A'
        }
        let ctrltem1 = you.find(item => item.keyName === '本地手动')
        if (ctrltem1 && ctrltem1.value === 1) {
          this.dataStore.ctrlType = 0
        } else {
          let ctrltem2 = you.find(item => item.keyName === '远程自动')
          if (ctrltem2 && ctrltem2.value === 1) {
            this.dataStore.ctrlType = 1
          } else {
            this.dataStore.ctrlType = 3
          }
        }
      }
    },
  beforeDestroy: function () {
    this.timer.forEach(item => window.clearInterval(item))
  }
  }
</script>

<style scoped>
  .blacc {
    width: 24%;
    float: left;
  }

  /*2k: 2560x1440*/
  @media screen and (min-width: 1921px) {
    .blacc {
      margin-left: 5px;
    }
  }

  /* 1080: 1920*1080 */
  @media screen and (max-width: 1920px)  and (min-width: 1601px) {
    .blacc {
      margin-left: 3px;
    }
  }

  /* 1600: 1600*900  */
  @media screen and (max-width: 1600px) and (min-width: 1367px) {
    .blacc {
      margin-left: 2px;
    }
  }

  /* 1366: 1366*678 */
  @media screen and (max-width: 1366px) {
    .blacc {
      margin-left: 2px;
    }
  }

  .imgStyle {
    height: 90%;
  }

  .nameZone {
    height: 100px;
    /*line-height: 120px;*/
    width: 100%;
    font-size: 17px;
    text-align: center;
    padding: 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: solid 1px #cbc4b7;
  }

  .nameZoneHover {
    height: 100px;
    width: 100%;
    font-size: 17px;
    text-align: center;
    padding: 10px;
    border: solid 1px #cbc4b7;
    cursor: pointer;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

  .nameZoneHover:hover {
    background: #dcdfe8;
  }

  .nameZoneStatus {
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    text-align: center;
    width: 100%;
    border-left: solid 1px #cbc4b7;
    border-bottom: solid 1px #cbc4b7;
    border-right: solid 1px #cbc4b7;
  }
  .runBg {
    background: #0bff58;
  }

  .stayBg {
    background: #f1e9d8;
  }

  .errorBg {
    background: red;
  }
</style>

<style>
  .dxaa .ivu-input-number {
    border: 0px;
  }

  .dxaa .ivu-input-number .ivu-input-number-input {
    padding: 0px;
  }
</style>
